<template>
  <van-tabbar v-model="show" class="home-menu">
    <van-tabbar-item name="message" :icon="getIcon('message','chat')">消息</van-tabbar-item>
    <van-tabbar-item name="todo" :icon="getIcon('todo','description')">待办</van-tabbar-item>
    <van-tabbar-item name="workplace" :icon="getIcon('workplace','apps')">工作台</van-tabbar-item>
    <van-tabbar-item name="me" :icon="getIcon('me','contact')">我</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import {computed, defineModel} from 'vue';

defineOptions({name: 'HomeMenu'});
const model = defineModel();

function getIcon(s, icon) {
  if (icon === 'apps') return 'apps-o';
  if (s === show.value) {
    return icon;
  }
  return `${icon}-o`;
}

const show = computed({
  get() {
    let res = model.value;
    if (!res) {
      model.value = res = 'message';
    }
    return res;
  },
  set(val) {
    model.value = val;
  }
});

</script>
<style lang="less">
.home-menu * {
  font-size: 0.12rem;
}

.home-menu {
  height: 0.48rem;
  position: relative;
  box-shadow: 0 0 25px var(--van-gray-4), 0 -1px 6px var(--van-gray-4);
}

.home-menu .van-icon {
  font-size: 0.20rem;
}

</style>